<script lang="ts" setup>
import { useRoute } from 'vue-router'
import { rawRoutes } from '../../router'
import UiSubmenu from './Submenu.vue'
import UiMenuItem from './MenuItem.vue'
import { computed } from 'vue'
import { ExtendedRouteRecordRaw } from '../../utils/types'

const cls = 'ui-aside'

const menus = computed(() => {
  return rawRoutes.filter(r => {
    return !/\/?:\w/.test(r.path)
  })
})

const route = useRoute()
const currentMenu = computed(() => {
  return menus.value.find(r => {
    return route.fullPath.startsWith(r.path)
  })
})

const menuItems = computed(() => {
  return (((currentMenu.value || {}).children || []) as ExtendedRouteRecordRaw[]).filter(r => {
    return !r.meta.notSubMenu
  })
})
</script>

<template>
  <div :class="cls">
    <div :class="`${cls}_menu`">
      <RouterLink :class="`${cls}_logo`" to="/">LOGO</RouterLink>
      <ElMenu background-color="var(--bg-color)">
        <UiMenuItem v-for="_ in menus" :key="_.path" :item="_" />
      </ElMenu>
    </div>
    <UiSubmenu v-if="menuItems.length" :items="menuItems" :title="currentMenu.meta.subTitle" />
  </div>
</template>

<style lang="scss">
.ui-aside {
  --bg-color: #1A2637;
  display: flex;
  > * {
    height: 100%;
  }
  &_logo {
    height: $header-height;
    display: flex;
    justify-content: center;
    align-items: center;
    color: #fff;
    text-decoration: none;
  }
  &_menu {
    background-color: var(--bg-color);
    .el-menu {
      border-right: none;
    }
  }
}
</style>
